import React, { useEffect, useRef, useState } from 'react'
import NavBar from '@/components/NavBar'
import styles from './index.module.scss'
import { useSelector } from 'react-redux'
export default function EditInput({
  inputVisible,
  changeVisible,
  commitUpdate,
}) {
  const { type } = inputVisible
  const inputRef = useRef(null)
  const textAreaRef = useRef(null)
  useEffect(() => {
    inputRef.current && inputRef.current.focus()
  }, [inputRef])

  useEffect(() => {
    textAreaRef.current && textAreaRef.current.focus()
    textAreaRef.current && textAreaRef.current.setSelectionRange(-1, -1)
  }, [textAreaRef])

  // 从redux中获取数据进行数据的回显
  const profile = useSelector((state) => state.profile.profile)
  // 定义文本框的数据
  const [inputValue, setInputValue] = useState(profile.name)
  // 定义文本域的数据
  const [textareaValue, setTextAreaValue] = useState(profile.intro || '')

  // 修改数据

  return (
    <div className={styles.root}>
      <NavBar
        extra={
          <span
            onClick={() => {
              // 触发父组件修改的方法
              commitUpdate(type, type === 'name' ? inputValue : textareaValue)
              // 父组件定义的关闭弹层的方法
              changeVisible()
            }}
            className="commit-btn"
          >
            提交
          </span>
        }
        changeVisible={changeVisible}
      >
        编辑昵称
      </NavBar>
      <div className="content-box">
        <h3>{type === 'name' ? '昵称' : '简介'}</h3>
        {type === 'name' ? (
          <input
            value={inputValue}
            onChange={(e) => {
              setInputValue(e.target.value)
            }}
            ref={inputRef}
            className="input-wrap"
            type="text"
          />
        ) : (
          <div className="intro">
            <textarea
              value={textareaValue}
              onChange={(e) => {
                setTextAreaValue(e.target.value)
              }}
              ref={textAreaRef}
              className="textarea"
              maxLength={100}
              placeholder="请输入简介"
            ></textarea>
            <div className="count">{textareaValue?.length || 0} / 100</div>
          </div>
        )}
      </div>
    </div>
  )
}
